<template>
	<div class="header-box">
		<div class="header-content">
			<div class="left-tool">
				<a class="back" href="javascript:void(0);" @click="onClickCallBack()">
					<van-icon name="arrow-left" color="#343434" size=".3rem" />
				</a>
			</div>
			<div class="center">
				<p class="title">{{ title }}</p>	
			</div>
			<div class="right-tool"></div>				
		</div>
	</div>
</template>

<script setup>
import router from '@/router';

defineProps({
	title: {
		type: String,
		required: false,
		default: "水电燃气费"
	},
});

const onClickCallBack = () => {
	router.back()
};

</script>

<style lang="scss" scoped>
.header-box {
		position: relative;
		height: 0.6rem;
		background: #fff;
		border-bottom: 1px solid #dcdcdc;

		.header-content {
			position: fixed;
			top: 0.1rem;
			left: 0;
			z-index: 11;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 0.16rem;
			width: 100%;
			height: 0.6rem;
			background: #fff;
			box-sizing: border-box;

		}
	}
</style>
